<template>
<div class="person">
 <h2>姓名:{{ name }}</h2>
 <h2>年龄:{{ age }}</h2>
 <button @click="changeName">修改名字</button>
 <button @click="changeAge">修改年龄</button>
 <button @click="showTele">查看联系方式</button>
</div>
</template>

<script lang="ts">
export default{
 name:'Person',
 setup(){
   // 数据
   let name = '张三'
   let age = 18
   let tel = '1388888888'

   // 方法
   function changeName(){
      name = '张san'
      console.log(name);
      
   }
   function changeAge () {
      console.log(age);

      age +=1
   }   
   function showTele (){
      alert(tel)
   }
   return{
      name,age,changeName,changeAge,showTele
   }
}
 
}
</script>

<style scoped>
button{
   margin:0 5px;
   
}
.person{
 border-radius: 10px;
 background-color:#8ee6ea;
 margin: 20px;
}
</style>